<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>搜索-添加交易所</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui-hangqing.css"/>
    <style type="text/css">
        html { overflow-y: scroll; }
        header {
            color: #FFFFFF;
            background: -webkit-linear-gradient(left top, #0F9BEB, #1569C8);
            /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(bottom right, #0F9BEB, #1569C8);
            /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(bottom right, #0F9BEB, #1569C8);
            /* Firefox 3.6 - 15 */
            background: linear-gradient(to bottom right, #0F9BEB, #1569C8);
            /* 标准的语法*/
        }
        select, input[type="text"], input[type="search"], input[type="password"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="tel"], input[type="color"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"] {

            margin-bottom: 0 !important;
        }
        .aui-checkbox:checked:before, .aui-checkbox.aui-checked:before {
           content: none !important;
        }
        .aui-checkbox:checked:after, .aui-checkbox.aui-checked:after {
            position: absolute;
            left: 0.25rem !important;
            top: 0.15rem !important;
            font-size: 0.7rem !important;
            display: inline-block;
            font-family: "auiicon";
            content: "\e645";
            color: #ffffff;
            pointer-events: none;
            margin-left: -0.25rem !important;
            margin-top: -0.15rem !important;
            background: transparent;
            border: 1px solid #ffffff;
            border-top: none;
            border-right: none;
            transform: rotate(-56deg) !important;
        }
        .aui-checkbox.aui-checkbox-info:checked, .aui-checkbox.aui-checkbox-info.aui-checked {
            background-color: #1569c8;
            border: solid 1px #3498db;
        }
        .aui-checkbox{
            border-radius: 0 !important;
        }
        .aui-bar {
            min-height: 1.6rem;
            line-height: 1.6rem;
        }

        .aui-bar .aui-title {
            min-height: 2.2rem !important;
            line-height: 2.2rem !important;
            overflow: hidden;
            text-overflow: ellipsis;
        }


        .aui-searchbar {
            margin: 0 !important;
            background: initial;
            height: 2.2rem !important;
            line-height: 2.2rem !important;
            padding-left: 0 !important;
            padding-right: 0rem !important;
        }

        .aui-searchbar-input {
            height: 1.4rem;
            margin: 0 0.75rem 0 0.75rem !important;
            padding-left: 0.4rem !important;
        }

        .aui-searchbar .aui-searchbar-btn {
            border: 0.05rem solid #ffffff;
            text-align: center;
            border-radius: 0.15rem;
            /*margin-right: 0.75rem;*/
            padding: 0;
        }
        .aui-searchbar .aui-icon-search {
            line-height: 30px;
            margin-right: 0.4rem;
        }
        .aui-searchbar-btn {
        }

        /*.aui-text-info {
            color: #FFFFFF !important;
        }*/

        .aui-bar-nav {
            top: 0;
            padding-bottom: 0;
            box-shadow: 0px 5px 5px #0c5ebb;
        }

        .aui-searchbar .aui-searchbar-btn {
            border: 0.05rem solid #ffffff;
            color: #FFFFFF;
            width: 2.75rem;
            height: 1.45rem;
            line-height: 1.45rem;
        }

        .aui-searchbar-clear-btn {
            position: absolute;
            right: 0 !important;
            background-color: initial;
        }

        /*强制icon样式*/

        .back-icon {
            width: 1.1rem;
            height: 1.1rem;
            line-height: 1.1rem;
            background-image: url(../../image/btn/nav_back@2x.png);
            background-size: 1.1rem;
            /*margin: 30px 0 2px 0px;*/
            background-position: center;
            background-repeat: no-repeat;
        }
        .aui-bar .aui-pull-left {
            display: contents;
            padding-left: 10px;
            height: 2.2rem !important;
            line-height: 2.2rem !important;
            font-size: 0.8rem !important;
            font-weight: 400;
        }

        .search-icon {
            display: -webkit-box;
            width: 0.8rem;
            height: 0.8rem;
            background-image: url(../../image/btn/search_input_ss@2x.png);
            background-size: 0.8rem;
            margin: 0.3rem 0 0.05rem 0px;
            background-position: center;
            background-repeat: no-repeat;
        }
        .clear-icon {
            display: -webkit-box;
            width: 0.8rem;
            height: 0.8rem;
            background-image: url(../../image/btn/search_input_sc@2x.png);
            background-size: 0.8rem;
            margin: 0.15rem 0.75rem 0 0;
            background-position: center;
            background-repeat: no-repeat;
        }


        /*清除icon原有格式*/

        .aui-icon-search:before {
            content: initial;
        }

        .aui-icon-roundclosefill:before {
            content: initial;
        }

        /*列表强制样式*/

        .aui-content.search-list {
            background-color: #FFFFFF;
        }

        .aui-info.aui-margin-t-10.aui-padded-l-10.aui-padded-r-10 {
            border-bottom: 1px solid #e6e6e6;
        }

        .aui-info-item.mc-item {
            color: #000000;
            font-size: 0.7rem;
            width: 35%;
        }

        .aui-info-item.jys-item {
            width: 40%;
            font-size: 0.6rem;
        }

        .aui-info-item.sc-item {
            width: 10%;
            z-index: 1001
        }

        .aui-searchbar-input input {
            font-size: 0.6rem;
            width: 90%;
        }

        .aui-info-item.sc-item img {
            width: 1rem;
        }

        /*搜索失败提示*/
        /*注意:相对于不定高度的body绝对定位,不可给父集相对定位设置*/

        .aui-content.infor-big-content {
            /*position: relative;*/
        }

        .infor-content {
            width: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .infor-img-content {
            width: 100%;
            text-align: center;
        }

        .infor-img {
            display: inline-flex;
            height: 70px;
        }

        .infor-txt-content {
            width: 100%;
            display: inline-block;
            font-size: 0.6rem;
            color: #000000;
            padding: 0 !important;
        }

        header.aui-bar.aui-bar-nav.aui-bar-info {
            box-shadow: 0px 1px 3px #0c5ebb;
        }

        .aui-content-padded {
            padding: 0.75rem;
            background-color: #ffffff;
            margin-top: 0.75rem;
        }

        .aui-padded-r-10 {
            padding-right: 0.75rem !important;
        }

        .aui-padded-l-10 {
            padding-left: 0.75rem !important;
        }

        .aui-content.search-list {
            background-color: initial !important;
        }

        ul#searchChose {
            overflow: hidden;
            text-align: center;
            margin: 0 auto;
            padding: 0 0.75rem !important;
            margin-top: 1.05rem;
            /*background-color: #F7F7F7 !important;*/
        }

        ul#searchChose li {
            display: inline-block;
            float: left;
            border-radius: 1rem;
            font-size: 0.7rem;
            line-height: 0.7rem;
            min-width: 3.5rem !important;
            color: #666666;
            background-color: #FFFFFF;
            margin: 9px 4px;
            padding: 9px 13px;
            box-shadow: 0px 0px 3px #ccc;
        }
        #searchLis{
            border: none;
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: top;
            background-image: none !important;

        }
        #searchLis li{
            background-color: #ffffff;
            border-bottom: 1px solid #e6e6e6 !important;
            z-index: 10000;
        }
        #searchLis li.aui-list-item.li-mairu {
            padding-left: 0.75rem !important;
            margin-left: 0 !important;
            background-color: #FFFFFF;
        }
        #searchLis li.aui-list-item.li-mairu {
            background-color: #FFFFFF;
            height: 2.25rem !important;
            line-height: 2.25rem !important;
        }
        label.aui-input-addon {
            position: absolute;
            left: 1.5rem !important;
        }
        input.aui-pull-right.aui-checkbox.aui-checkbox-info {
            margin-right: 0.35rem !important;
            overflow: hidden;
        }

        .aui-radio, .aui-checkbox {
            background-color: #ffffff;
            border: solid 1px #999999;
        }
        .aui-radio, .aui-checkbox {
            width: 0.65rem;
            height: 0.65rem;
        }
        span {
            display: inline-block;
            float: left;
        }
        /*禁止引用至编辑页面*/
        span.btImg {
            width: 1.1rem;
            height: 2.25rem;
            line-height: 2.25rem !important;
            background: url(../../image/btn/setting_hlgl@2x.png) no-repeat;
            background-size: 1.1rem;
            background-position: center;
            margin: 0px auto;
        }

        span.btName,
        span.btWalet{
            margin-left: 0.5rem;
            line-height: 2.2rem;
            font-size: 0.7rem !important;
            color: #000000 !important;
        }
        span.btWalet{
            margin-left: 0rem;
        }
        header.aui-bar.aui-bar-nav.aui-bar-info {
            padding-top: 1rem !important;
        }
        .aui-icon-left:before {
            content: none !important;
        }
        .aui-icon-left{
            width: 1.1rem !important;
            height: 1.1rem !important;
            background-image: url("../../image/nav_back@2x.png");
            background-size: 1.1rem !important;
            background-repeat: no-repeat !important;
            font-size: 0.9rem !important;
            line-height: 1.2rem !important;
            padding: 0 !important;
            margin: 0 0 0 0.75rem !important;
            color: #ffffff;
        }
        .aui-list-item-inner{
            position: relative;
            overflow: hidden;
        }
        .aui-list .aui-list-item-inner {
            position: relative;
            min-height: 2.2rem;
            padding-right: 0.75rem;
            width: 100%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-flex: 1;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        span.moreList{
            display: inline-block;
            width: 1.1rem !important;
            height: 1.1rem !important;
            background-image: url("../../image/setting_more@2x.png");
            background-size: 1.1rem !important;
            background-repeat: no-repeat;
            background-position: center;
        }
        label.aui-input-addon {
            position: absolute;
            left: 1.25rem !important;
        }
        .aui-checkbox {
            position: relative;
             margin: 0;
        }
    </style>
</head>

<body>
<header class="aui-bar aui-bar-nav aui-bar-info">
    <a  class="aui-pull-left" onclick="backAddPage()">
        <span class="back-icon"></span>
    </a>
    <div class="aui-title">添加交易所</div>
    <!--搜索框-->
    <div class="aui-searchbar" id="search">
        <div class="aui-searchbar-input aui-border-radius">
            <span class="aui-iconfont aui-icon-search search-icon"></span>
            <input type="search" placeholder="请输入搜索内容" id="search-input" autofocus="autofocus">
            <div class="aui-searchbar-clear-btn">
                <span class="clear-icon"></span>
            </div>
        </div>
        <div class="aui-searchbar-btn" style="margin-right: 15px;" tapmode>取消</div>
    </div>

</header>
<!--搜索行情列表-->
<section class="aui-content search-list" >

    <ul id="searchChose">
        <li>币安</li>
        <li>BitFinnex</li>
        <li>Okex</li>
        <li>Liqui</li>
        <li>Huobi</li>
        <li>coolCoin</li>
    </ul>
    <ul id="searchLis">
        <!--<li class="aui-list-item li-mairu">-->
        <!--<div class="aui-list-item-inner">-->
        <!--<label class="aui-input-addon"><span class="btImg"></span ><span class="btName">比特币2</span></label>-->
        <!--</div>-->
        <!--</li>-->
        <!--<li class="aui-list-item li-mairu">-->
        <!--<div class="aui-list-item-inner">-->
        <!--<label class="aui-input-addon"><span class="btImg"></span ><span class="btName">比特币2</span></label>-->
        <!--</div>-->
        <!--</li>-->
    </ul>



</section>

<!--搜索失败显示-->
<section class="infor-big-content">
    <!-- <div class="infor-content">
        <div class="infor-img-content">
            <img src="../../icon/icon150x150.png" class="infor-img"/>
        </div>
        <p class="aui-padded-10 aui-text-center infor-txt-content">对不起，没有搜索到相关内容！</p>
    </div> -->

</section>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script src="../../jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../script/tool.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    var headers = {
        "appVersion": "1.0.0",
        "os": "ios",
        "osVersion": "10.0.0"
    }
    //	点击搜索第二功能
    apiready = function () {
        api.parseTapmode();
        headers = {
            "appVersion": "1.0.0",
            "os": api.systemType,
            "osVersion": api.systemVersion
        }
    }
    var searchBar = document.querySelector(".aui-searchbar");
    var searchBarInput = document.querySelector(".aui-searchbar input");
    var searchBarBtn = document.querySelector(".aui-searchbar .aui-searchbar-btn");
    var searchBarClearBtn = document.querySelector(".aui-searchbar .aui-searchbar-clear-btn");
    if (searchBar) {
        searchBarInput.onclick = function () {
            searchBarBtn.style.marginRight = "0.75rem";
        }
        searchBarInput.oninput = function () {
            if (this.value.length) {
                searchBarClearBtn.style.display = 'block';
                //              cation: aui-text-info属性对该处功能有影响
                //              searchBarBtn.classList.add("aui-text-info");
                searchBarBtn.textContent = "搜索";
                $("#searchChose").css("display","none")
            } else {
                searchBarClearBtn.style.display = 'none';
                //              searchBarBtn.classList.remove("aui-text-info");
                searchBarBtn.textContent = "取消";
            }
        }
    }
    searchBarClearBtn.onclick = function () {
        this.style.display = 'none';
        searchBarInput.value = '';
        searchBarBtn.classList.remove("aui-text-info");
        searchBarBtn.textContent = "取消";
        $('#searchLis').empty();
        $("#searchChose").css("display","block")
    }

    searchBarBtn.onclick = function () {
        $('#searchLis').empty();
        var keywords = searchBarInput.value;
        if (keywords.length) {
            searchBarInput.blur();
            //document.getElementById("searchLis").textContent = keywords;
            ajax_fordata(keywords);
            // colected();
        } else {

            this.style.marginRight = "-" + this.offsetWidth + "px";
            searchBarInput.value = "";
            searchBarInput.blur();

        }

    }
    var resultlist = [];

    function ajax_fordata(k) {
        //http://api.kktoken.io:7001/coin/searchCoin
        //			var k='';
        $.ajax({
            url: orginlink + '/coin/searchCoin?nickName=' + k,
            type: 'GET',
            headers: headers,
            contentType: "application/json",
            dataType: 'json',
            success: function (result) {
                resultlist = result.result;
                addSearch(result, k);
                localStorage.setItem('exchangeId', JSON.stringify(result));
                localStorage.setItem("dataList",JSON.stringify(result.result))
            }
        });
    }

    //行情搜索
    var mindex = 0;

    function addSearch(result, k) {

        $.each(result.result, function (index, obj) {
            var jysName = obj['exchangeId'];
            var nickName = obj['nickName'];
            var symbol=obj['symbol'];
            var x = getjysName(jysName);

            var is = 1;
            var likeList = JSON.parse(localStorage.getItem("likeLists"))
            if (!likeList)
                likeList = []

            for (let i of likeList) {
                if (i.nickName == resultlist[index].nickName && i.exchangeId == resultlist[index].exchangeId) {
                    is = 0
                }
            }
            $('#searchLis').append('<li class="aui-list-item li-mairu" style="border-bottom: 0.05rem #e6e6e6 solid !important;">' +
                '<div class="aui-list-item-inner">' +
                '<label class="aui-input-addon"><span class="btImg"></span ><span class="btName">'+nickName+'('+symbol+')'+'</span></label>' +
                '</div>' + '</li>');
        });
        clickLis();
    }
    // 常用列表的点击
    $("#searchChose li").click(function(){
        var $li =$(this);
        console.log($li.data('select'))
        if ($li.data('select') == true){
            $li.css('backgroundColor', '#ffffff').data('select', false);
            localStorage.removeItem("exchangeIdAdd",$("#searchChose li").text());
        }
        else{
            $li.css('backgroundColor', '#e5e5e5').data('select', true);
            localStorage.setItem("exchangeIdAdd",$(this).text());
            backAddPage()
        }

    })

    // 输入搜索信息展示列表后的点击
    function clickLis() {
        $("#searchLis li").click(function () {
            // localStorage.setItem("nickName",nickName);
            localStorage.setItem("exchangeIdAdd",$(this).text());
            backAddPage()

        })
    }



    function backAddPage() {
        window.history.go(-1);
    }





</script>

</html>
